apps/playground-web/src/app/ai/api/types.ts (1)

37-37: Make the flag non-optional to simplify downstream handling.

Given we always coalesce to a boolean in the payload, consider making this required with a default of false at construction sites to avoid extra undefined checks across the codebase.

-  autoExecuteTransactions?: boolean;
+  autoExecuteTransactions: boolean;

apps/playground-web/src/app/ai/api/chat.ts (1)

25-27: Prefer nullish coalescing and omit nullish fields in the payload.

Use ?? for boolean defaulting and avoid sending null for wallet_address (omit instead), which tends to be cleaner for APIs.

-      wallet_address: params.context.walletAddress,
-      auto_execute_transactions: params.context.autoExecuteTransactions || false,
+      wallet_address: params.context.walletAddress ?? undefined,
+      auto_execute_transactions: params.context.autoExecuteTransactions ?? false,

apps/playground-web/src/app/ai/components/ChatPageContent.tsx (3)

71-76: Harden chain ID parsing and de‑duplicate entries.

Only allow digits, support comma/space separators, and remove duplicates to avoid accidental duplicates or formats like 1e3.

-    const userChainIdArray = userChainIds
-      .split(',')
-      .map(id => id.trim())
-      .filter(id => id !== '' && !isNaN(Number(id)));
+    const userChainIdArray = Array.from(
+      new Set(
+        userChainIds
+          .split(/[,\s]+/)
+          .map((id) => id.trim())
+          .filter((id) => /^\d+$/.test(id)),
+      ),
+    );

---

125-129: Prefill the options bar from current context for better UX.

Initialize with existing address/chain IDs so users see the active values instead of blanks.

-  const [userWalletAddress, setUserWalletAddress] = useState("");
-  const [userChainIds, setUserChainIds] = useState("");
-  const [userAutoExecute, setUserAutoExecute] = useState(false);
+  const [userWalletAddress, setUserWalletAddress] = useState(address || "");
+  const [userChainIds, setUserChainIds] = useState(
+    (_contextFilters?.chainIds || []).join(", "),
+  );
+  const [userAutoExecute, setUserAutoExecute] = useState(false);

---

739-796: Conform to design system: remove inline styles, add explicit return type.

• Use Tailwind width utilities instead of inline style.
• Add an explicit return type per the TypeScript guideline.
• Optionally, replace native inputs with @/components/ui/input and a design-system Checkbox/Switch (not shown here to keep the diff minimal).

-function ContextOptionsBar(props: {
+function ContextOptionsBar(props: {
   walletAddress: string;
   chainIds: string;
   autoExecute: boolean;
   onWalletAddressChange: (value: string) => void;
   onChainIdsChange: (value: string) => void;
   onAutoExecuteChange: (value: boolean) => void;
-}) {
+}): React.JSX.Element {
   return (
     <div className="mb-4 rounded-lg border bg-card p-3">
       <div className="flex flex-wrap items-center gap-4">
         <div className="flex items-center gap-2">
           <label htmlFor="wallet-address" className="text-sm font-medium text-muted-foreground">
             Wallet Address:
           </label>
           <input
             id="wallet-address"
             type="text"
             value={props.walletAddress}
             onChange={(e) => props.onWalletAddressChange(e.target.value)}
             placeholder="0x..."
-            className="px-2 py-1 text-sm border border-border rounded focus:outline-none focus:ring-1 focus:ring-ring focus:border-ring bg-background"
-            style={{ width: "200px" }}
+            className="w-[200px] px-2 py-1 text-sm border border-border rounded focus:outline-none focus:ring-1 focus:ring-ring focus:border-ring bg-background"
           />
         </div>
         
         <div className="flex items-center gap-2">
           <label htmlFor="chain-ids" className="text-sm font-medium text-muted-foreground">
             Chain IDs:
           </label>
           <input
             id="chain-ids"
             type="text"
             value={props.chainIds}
             onChange={(e) => props.onChainIdsChange(e.target.value)}
             placeholder="1, 8453"
-            className="px-2 py-1 text-sm border border-border rounded focus:outline-none focus:ring-1 focus:ring-ring focus:border-ring bg-background"
-            style={{ width: "100px" }}
+            className="w-[120px] px-2 py-1 text-sm border border-border rounded focus:outline-none focus:ring-1 focus:ring-ring focus:border-ring bg-background"
           />
         </div>

Follow-up (optional): swap the native <input>s for Input from @/components/ui/input and a DS Checkbox/Switch to fully align with the playground design system.

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.